<template>
  <van-dropdown-menu active-color="#5a9df8" style="width: 122px">
    <van-dropdown-item v-model="timeType" :options="dateOption" @change="handleTimeType" />
  </van-dropdown-menu>
  <p class="p-t-xxs color-dark" style="min-width: 122px;">统计日期：{{ dateToStr }}</p>
</template>

<script>
import { useRouter } from 'vue-router'
import { reactive, toRefs, onBeforeMount, computed } from 'vue'
export default {
  name: 'stastics',
  emits: ['change'],
  props: {
    earliestTime: {
      type: String,
      default: ''
    },
    timeType: {
      type: String,
      default: ''
    }
  },
  setup(props, cxt) {
    const router = useRouter()
    const timeType=computed(()=>{
      return props.timeType
    })
    const state = reactive({
      dateOption: [
        { text: '本日', value: 'TODAY' },
        { text: '本周', value: 'THIS_WEEK' },
        { text: '本月', value: 'THIS_MONTH' },
        { text: '全部', value: '' }
      ]
    })
    const dateToStr = computed(() => {
      let str = ''
      const currentDate = new Date()
      // 获取年、月、日
      const year = currentDate.getFullYear()
      const month = String(currentDate.getMonth() + 1).padStart(2, '0')
      const day = String(currentDate.getDate()).padStart(2, '0')
      if (timeType.value == 'TODAY') {
        str = `${year}-${month}-${day}`
      } else if (timeType.value == 'THIS_WEEK') {
        const currentDay = currentDate.getDay()
        // 获取本周一的时间戳
        const mondayTimestamp = currentDate.getTime() - (currentDay - 1) * 24 * 60 * 60 * 1000
        // 获取本周日的时间戳
        const sundayTimestamp = mondayTimestamp + 6 * 24 * 60 * 60 * 1000

        const mondayDate = new Date(mondayTimestamp)
        const sundayDate = new Date(sundayTimestamp)
        const year1 = mondayDate.getFullYear()
        const month1 = String(mondayDate.getMonth() + 1).padStart(2, '0')
        const day1 = String(mondayDate.getDate()).padStart(2, '0')
        const year2 = sundayDate.getFullYear()
        const month2 = String(sundayDate.getMonth() + 1).padStart(2, '0')
        const day2 = String(sundayDate.getDate()).padStart(2, '0')
        const monday = `${year1}-${month1}-${day1}`
        const sunday = `${year2}-${month2}-${day2}`
        str = `${monday}到${sunday}`
      } else if (timeType.value == 'THIS_MONTH') {
        // 获取当前月份的第一天
        currentDate.setDate(1)
        const firstDay = `${year}-${month}-${currentDate.getDate()}`

        // 获取当前月份的最后一天
        const nextMonthFirstDay = new Date(year, currentDate.getMonth() + 1, 1) //下个月的第一天
        const oneDay = 1000 * 60 * 60 * 24
        const endDay = new Date(nextMonthFirstDay - oneDay)
        const lastDay = `${year}-${month}-${endDay.getDate()}`
        str = `${firstDay}到${lastDay}`
      } else if (timeType.value == '') {
        str = `至今`
      }
      return str
    })
    const handleTimeType = () => {
      cxt.emit('change', timeType)
    }
    onBeforeMount(() => {})

    return {
      ...toRefs(state),
      dateToStr,
      handleTimeType
    }
  }
}
</script>
<style lang="less" scoped></style>
